<template>
  <div class="MyTable">
    <div :class="opic">
      <el-table
        id="tableDataId"
        ref="Table"
        :height="tableH"
        :stripe="stripe"
        :data="tableData"
        :border="border"
        :row-class-name="tableRowClassName"
        style="width: 100%;overflow-y: auto;"
      >
        <el-table-column
          type="selection"
          label="选择"
          width="55">
        </el-table-column>
        <el-table-column
          v-if="showIndex"
          fixed="left"
          label="序号"
          :align="'center'"
          width="70"
        >
          <template slot-scope="scope">
            {{ (paginationData.current - 1) * paginationData.pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column
          v-for="(item, index) in columnData"
          :key="index"
          :fixed="item.fixed || false"
          :align="item.align || 'center'"
          :prop="item.prop"
          :label="item.label"
          :min-width="item.minWidth"
        />
        <el-table-column
          v-if="showOperate"
          label="响应"
          width="240"
          fixed="right"
          :align="'center'"
        >
          <template slot-scope="scope">
            <!-- 操作按钮插槽 -->
            <el-button v-for="(item, index) in operateBtn" :key="index" :type="item.type" :icon="item.icon" @click="handleClick(scope.row, item.event)">
              {{ item.label }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
        :current-page="paginationData.current"
        :page-sizes="paginationData.size"
        :page-size="paginationData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="paginationData.total"
        :locale="locale"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script>
import { locale as zhLocale } from 'element-ui/lib/locale/lang/zh-CN'
export default {
  name: 'MyTable',
  props: {
    // 分页时是否调用接口
    isCallApi: {
      type: Boolean,
      default: false
    },
    // 是否显示索引
    showIndex: {
      type: Boolean,
      default: false
    },
    // 是否显示操作按钮
    showOperate: {
      type: Boolean,
      default: false
    },
    // 是否开去栅格条纹
    stripe: {
      type: Boolean,
      default: false
    },
    // 是否有边框
    border: {
      type: Boolean,
      default: false
    },
    // 表格数据
    tableData: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 表格列数据
    columnData: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 右侧操作按钮
    operateBtn: {
      type: Array,
      default: () => {
        return []
      }
    },
    paginationData: {
      type: Object,
      default: () => {
        return {
          current: 1, // 当前页
          pageSize: 100, // 每页条数
          size: [5, 10, 20, 30],
          total: 0 // 总条数
        }
      }
    }
  },
  data() {
    return {
      tableH: 'calc(100% - 30px)',
      opic: 'class_one',
      current: 1, // 当前页
      locale: zhLocale // 中文
    }
  },
  methods: {
    // 表格点击操作
    handleClick(row, event) {
      this.$emit('handleClick', row, event)
    },
    // 分页条数改变
    handleSizeChange(size) {
      this.$emit('pageSizeChange', size)
    },
    // 分页页数改变
    handleCurrentChange(current) {
      this.$emit('pageCurrentChange', current)
    },
    // 自定义行类名
    tableRowClassName({ row, rowIndex }) {
      return 'custom-row-height'
    }
  }
}
</script>
<style lang="scss">
  .MyTable{
    height: 100%;
    width: 100%;
    .class_one{
      width: 100%;
      height: calc(100% - 30px);
    }
    .class_two{
      width: 100%;
      height: calc(100% - 60px);
    }
  }
  // 分页
  .el-pagination{
    display: flex !important;
    justify-content: center !important;
  }

  // 自定义行高度
  .el-table .custom-row-height {
    height: 30px; // 设置行高
  }
</style>
